<!-- 绑定/更换手机号 changeMobile  -->
<template>
  <view class="w-100 flex flex-column align-center text">
    <view class="topHeader">
      <view class="topCenter flex flex-row justify-between">
        <view> {{ introInfo.type == 'ordinaryUser' ? '普通用户' : introInfo.type == 'vip' ? 'VIP会员' : setNameTitle()
          }}
        </view>
        <image :src="`${nc_image_path}/nc_image_close_balck.png`"
               :style="setImageStyle(32,32)"
               @click.stop="closeAuthModal()"
        >
        </image>
      </view>
    </view>
    <s-block :styles="listStyle(35)"></s-block>
    <!--    <su-avatar :src="`${nc_image}${userInfo.avatar}`"-->
    <!--               :avatarStyle="setImageStyle(92, 92)"-->
    <!--               :imageStyle="">-->
    <!--    </su-avatar>-->
    <view class="wh_710 flex align-center ">
      <image :style="setImageStyle(147, 147)"
             :src="userInfo.avatar.indexOf('http')!= -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
      ></image>
      <view class="flex flex-column align-start ml_20">
        <view class="fs_30 color_575757 flex align-end">
          <text class="fs_36">{{ userInfo.nickname }}</text>&nbsp;&nbsp;<text>拾亲号:&nbsp;{{ userInfo.uid }}</text>
        </view>
        <view class="hW_11"></view>
        <view class="follow_button flex flex-row align-center justify-center"
              :class="setFollowStyle()"
        >
          <image
            :src="`${IMG_URL}/index/${setFollowImage()}.png`"
            class="hW_31 wh_31"
          ></image>
          <view class="text ml_15">{{ setName() }}</view>
        </view>
        <view class="hW_9"></view>
        <view class="fs_24 color_4E4E4E">
          {{
            introInfo.type == 'ordinaryUser' ? '未开通vip'
              : introInfo.type == 'vip' ? `会员到期时间：${dayjs(Number(userInfo.vip_end_time) * 1000).format('YYYY年MM月DD日 HH:mm')}`
                : introInfo.info.area
          }}
        </view>
      </view>
    </view>
    <s-block :styles="listStyle(21)"></s-block>
    <!--    <view class="userIdentity userInfo  flex flex-row align-center justify-center">-->
    <!--      {{ introInfo.type == 'ordinaryUser' ? '普通用户' : introInfo.type == 'vip' ? '会员用户' : setName() }}-->
    <!--    </view>-->
    <!--    <s-block :styles="listStyle(229)" v-if="introInfo.type == 'ordinaryUser'"></s-block>-->
    <!--    <s-block :styles="listStyle(26)" v-else></s-block>-->
    <!--    <view class="userIdentity userInfo flex flex-row align-center justify-center" v-if="introInfo.type == 'vip'">-->
    <!--      {{ `会员到期时间：${dayjs(Number(userInfo.vip_end_time) * 1000).format('YYYY年MM月DD日 HH:mm')}` }}-->
    <!--    </view>-->
    <!--    <view class="userIdentity userInfo flex flex-row align-center justify-center" v-if="introInfo.type == 'other'">-->
    <!--      {{ introInfo.info.area }}-->
    <!--    </view>-->
    <s-block :styles="listStyle(70)" v-if="introInfo.type == 'vip'"></s-block>
    <view class="openMembership flex flex-row align-center justify-center" v-if="introInfo.type == 'ordinaryUser'"
          @tap="openVip">
      <!--      <image :src="`${nc_image_path}/nc_vip_icon.png`" :style="setImageStyle(84,26)"></image>-->
      开通会员
    </view>
    <view class="openMembership flex flex-row align-center justify-center" v-if="introInfo.type == 'vip'"
          @tap="purchaseMembership">
      <!--      <image :src="`${nc_image_path}/nc_vip_icon.png`" :style="setImageStyle(84,26)"></image>-->
      会员续费
    </view>
    <s-block :styles="listStyle(42)" v-if="introInfo.type == 'vip' || introInfo.type == 'ordinaryUser'"></s-block>
    <s-block :styles="listStyle(129)" v-if="introInfo.type == 'other'"></s-block>
    <view class="openMembership flex flex-row align-center justify-center"
          @tap="extensionCenter">
      {{ setExtend() }}
    </view>
    <s-block :styles="listStyle(148)" v-if="introInfo.type != 'vip' && introInfo.type != 'ordinaryUser'"></s-block>
    <s-block :styles="listStyle(79)" v-else-if="introInfo.type != 'ordinaryUser'"></s-block>
    <s-block :styles="listStyle(40)" v-else></s-block>
    <view class="fs_24 flex align-center justify-center" style="color:#A0A0A0"
          v-if="introInfo.type == 'vip' || introInfo.type == 'ordinaryUser'"
          @click.stop="sheep.$router.go('/pages/public/richtext',{id:4,title:'会员权益'})"
    >
      VIP会员说明
    </view>
    <s-block :styles="listStyle(20)" v-if="introInfo.type == 'vip' || introInfo.type == 'ordinaryUser'"></s-block>
  </view>


</template>

<script setup>
  import { computed, onMounted, reactive } from 'vue';
  import sheep from '@/sheep';
  import { closeAuthModal } from '@/sheep/hooks/useModal';
  import SBlock from '@/sheep/components/s-block/s-block.vue';
  import SuAvatar from '@/sheep/ui/su-avatar/su-avatar.vue';
  import dayjs from 'dayjs';
  import SPopupVip from '@/sheep/components/s-popup-vip/s-popup-vip.vue';

  const vipDisposition = reactive({
    isShow: false,
    goodDetails: {},
  });

  const introInfo = computed(() => sheep.$store('user').introInfo);
  const introType = computed(() => sheep.$store('user').introType);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const IMG_URL = sheep.$store('AI').sq_image_path;
  const userInfo = computed(() => sheep.$store('user').userInfo);


  const setImageStyle = (width, height) => ({ width: width + 'rpx', height: height + 'rpx', borderRadius: '24rpx' });
  const setNameTitle = () => {
    switch (introInfo.value.info.level) {
      case 3:
        return '修谱师';
      case 4:
        return '区县服务中心';
      case 5:
        return '市级运营中心';
      case 6:
        return '省域分公司';
      case 7:
        return '联合创始人';
    }
  };
  const setName = () => {
    if (introInfo.value.type == 'ordinaryUser') {
      return '普通用户';
    }
    if (introInfo.value.type == 'vip') {
      return 'VIP会员';
    }
    switch (introInfo.value.info.level) {
      case 3:
        return '修谱师';
      case 4:
        return '服务中心';
      case 5:
        return '运营中心';
      case 6:
        return '分公司';
      case 7:
        return '联合创始人';
    }
  };

  const setFollowStyle = () => {
    if (introInfo.value.type == 'ordinaryUser') {
      return 'bg_C1C1C1';
    }
    if (introInfo.value.type == 'vip') {
      return 'bg_FF4206';
    }
    switch (introInfo.value.info.level) {
      case 3:
        return 'bg_FFC134';
      case 4:
        return 'bg_FF487F';
      case 5:
        return 'bg_CC8A00';
      case 6:
        return 'bg_4887FF';
      case 7:
        return 'bg_FF4206';
    }
  };

  const setFollowImage = () => {
    if (introInfo.value.type == 'ordinaryUser') {
      return 'user_ordinaryUser_icon';
    }
    if (introInfo.value.type == 'vip') {
      return 'user_vip_icon';
    }
    switch (introInfo.value.info.level) {
      case 3:
        return 'user_serviceProvider_icon';
      case 4:
        return 'user_serviceCenter_icon';
      case 5:
        return 'user_operationCenter_icon';
      case 6:
        return 'user_subsidiaryCompany_icon';
      case 7:
        return 'user_vip_icon';
    }
  };

  const setExtend = () => {
    if (introInfo.value.type == 'vip' || introInfo.value.type == 'ordinaryUser') {
      return '推广中心';
    }
    switch (introInfo.value.info.level) {
      case 3:
        return '修谱师详情';
      case 4:
        return '服务中心详情';
      case 5:
        return '运营中心详情';
      case 6:
        return '分公司详情';
      case 7:
        return '推广中心';
    }
  };

  // introInfo.value.info.level == 3 ? 'user_serviceProvider_icon' : introInfo.value.info.level == 4 ? 'user_serviceCenter_icon':introInfo.value.info.level == 5 ? 'user_operationCenter_icon':'user_subsidiaryCompany_icon'
  // introInfo.value.info.level == 3 ? 'bg_FFC134':introInfo.value.info.level == 4 ? 'bg_FF487F':introInfo.value.info.level == 5 ? 'bg_CC8A00':'bg_4887FF'

  // 栅格样式
  const listStyle = (number = 10) => {
    return {
      marginTop: uni.upx2px(number),
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      'border-top-left-radius': 0,
      'border-top-right-radius': 0,
      'border-bottom-left-radius': 0,
      'border-bottom-right-radius': 0,
      padding: 0,
      overflow: 'hidden',
      background: {
        type: 'color',
        bgColor: 'transparent',
      },
    };
  };

  onMounted(async () => {
    const { data } = await sheep.$api.goods.ids({ ids: '10' });
    vipDisposition.goodDetails = data[0];
  });

  async function purchaseMembership() {
    closeAuthModal();
    let obj = {};
    let arr = [];
    arr.push({
      goods_id: vipDisposition.goodDetails.id,
      goods_num: 1,
      goods_sku_price_id: vipDisposition.goodDetails.id,
    });
    obj.goods_list = arr;
    obj.is_from = 1;
    obj.order_type = 'goods';
    const { code, data } = await sheep.$api.order.create(obj);
    sheep.$router.go('/pages/pay/index', {
      orderSN: data.order_sn,
      flag: 1,
    });
  }

  function extensionCenter() {
    closeAuthModal();
    if (introInfo.value.type == 'vip' || introInfo.value.type == 'ordinaryUser') {
      sheep.$router.go('/pages/extend/extensionCenter', { level: 2 });
      return;
    }
    sheep.$router.go('/pages/extend/extensionCenter', { level: introInfo.value.info.level });
  }

  function openVip() {
    closeAuthModal();
    uni.$emit('iosPay');
  }
</script>

<style lang="scss" scoped>
  .text {
    font-size: 38rpx;
    line-height: 42rpx;
    font-weight: bold;
    color: $dark-3;
  }

  .topHeader {
    width: 750rpx;
    background: #FFF8E8;
    font-weight: 500;
    font-size: 48rpx;
    color: #292929;
  }

  .topCenter {
    margin: 39rpx 50rpx 28rpx 50rpx;
  }

  .userInfo {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }

  .userIdentity {
    width: 652rpx;
    height: 80rpx;
    background: #292A2E;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .openMembership {
    width: 420rpx;
    height: 80rpx;
    background: linear-gradient(132deg, #FF7950 0%, #FF4206 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;

    image {
      position: absolute;
      left: 0;
      top: -26rpx;
    }
  }

  .follow_button {
    padding: 0 24rpx;
    height: 51rpx;
    border-radius: 5rpx 5rpx 5rpx 5rpx;

    .text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 28rpx;
    }
  }

  .memberPopup {
    width: 750rpx;
    height: 789rpx;

    .exchange {
      width: 325rpx;
      position: absolute;
      right: 215rpx;
      top: 154rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #E94F09;
      padding: 0 0 5rpx 0;
    }
  }

  .button_vip {
    position: absolute;
    left: 50%;
    bottom: 110rpx;
    transform: translate(-50%, 0);
    width: 269rpx;
    height: 82rpx;
    background: url($uni-bg-url + '/nc_vip_button.png') no-repeat;
    background-size: 269rpx 82rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 41rpx;
    color: #FF4206;
  }

  .chatDetail {
    position: absolute;
    left: 50%;
    bottom: 270rpx;
    transform: translate(-50%, 0);
  }
</style>
